<template>
  <div class="contnt">
    <div class="top">
      <div id="square" class="flipInX animated image">
        <img src="@/assets/touxx.jpg" alt="" />
      </div>
      <div class="title">
        <div class="title_we">
          Hello,欢迎来到
          <span ref="colorRef"> <z-text class="anim">呵呵的牛！</z-text> </span>
        </div>
        <div class="title_chi">
          {{ this.showTitle }}
        </div>
        <div style="margin-top: 30px">
          <div class="title_chi">社交媒体</div>
          <div class="icon">
            <ul>
              <li
                @mouseleave="this.leave"
                v-for="(item, index) in shejiao"
                :key="index"
              >
                <p class="tishi">{{ item.title }}</p>
                <img :src="item.src" />
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="swipper">
      <el-carousel height="520px" width="1070px" arrow="never">
        <el-carousel-item
          height="520px"
          width="1070px"
          v-for="(item, index) in this.slist"
          :key="index"
        >
          <div class="swiper_position">
            <div class="swiper_title">
              <span
                ><a>{{ item.title }}</a></span
              >
              <span><a href="#">开始阅读</a></span>
            </div>
            <img :src="item.src" />
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
</template>

<script>
import { onMounted, reactive, ref, toRaw } from "vue";
import getRgba from "@/utils/common.js";
import wx from "@/assets/wx.png";
import qq from "@/assets/qq.jpg";
import wyyx from "@/assets/wyyx.png";
import zh from "@/assets/zh.png";
import gh from "@/assets/gh.png";
import aa from "@/assets/1.jpg";
import bb from "@/assets/2.jpg";
import cc from "@/assets/3.jpg";
import dd from "@/assets/4.jpg";
import ee from "@/assets/5.jpg";

export default {
  name: "Home",
  setup() {
    const showTitle = ref("心之所向，身之所往，价值所在。");
    const isBlock = ref(0);
    const colorRef = ref(null);
    const swiperList = reactive([
      {
        src: aa,
        title: "蒸汽光波",
      },
      { src: bb, title: "建筑几何" },
      { src: cc, title: "我的世界" },
      { src: dd, title: "强烈碎片" },
      { src: ee, title: "梦幻蒸汽波" },
    ]);
    const shejiao = reactive([
      { src: wx, title: "fengshangjun520" },
      { src: qq, title: "178884799" },
      { src: wyyx, title: "15170281138@163.com" },
      {
        src: zh,
        title: "zhihu.com/people/feng-da-da-59-31",
      },
      { src: gh, title: "fengshangjun" },
    ]);
    const leave = (e) => {
      console.log(e);
      console.log(e.target.children[0].classList.add("leave_style"));
    };
    // setInterval(() => {
    //   showTitle.value =
    //     "互联网时代，没有自己的网站意味着你在这个世界上不存在。";
    // }, 1000);
    onMounted(() => {
      colorRef.value.style.color = getRgba();
      colorRef.value.style.transition = "color 3s";
    });
    const slist = toRaw(swiperList);
    return { showTitle, colorRef, slist, shejiao, leave };
  },
};
</script>
<style scoped>
.top {
  display: flex;
  height: 210px;
  width: 100%;
  box-sizing: border-box;
  padding: 25px 0px;
}
.title_we {
  font-family: "Arial Normal", "Arial";
  font-size: 36px;
}
.anim {
  animation: wobble 10s ease-in-out infinite;
  transform: rotateX(30deg) rotateY(-30deg);
}
.image {
  height: 160px;
  width: 160px;
}
img {
  height: 100%;
  width: 100%;
}
.title {
  margin-left: 30px;
}
.title_chi {
  font-family: "Arial Normal", "Arial";
  font-size: 13px;
  color: #868686;
  margin-top: 18px;
}
.icon ul {
  height: 38px;
  width: 50%;
  display: flex;
  justify-content: space-between;
}
.icon li {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 38px;
  border: 1px solid rgba(241, 241, 241, 1);
  border-radius: 38px;
}
.icon li img {
  height: 22px;
  width: 22px;
}
.icon li:hover {
  background-color: #ccc;
  border: 1px solid #ddd;
}
.icon li img:hover {
  animation: pulse 1s infinite;
  -webkit-animation: pulse 1s infinite; /* Safari 和 Chrome */
}
.tishi {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none;
  width: 400px;
  height: 200px;
  background: hsla(0, 0%, 100%, 0.3);
  color: #fff;
  margin-top: 0px;
  border-radius: 16px;
  z-index: 10;
  text-align: center;
  line-height: 200px;
  animation: blockan 1s 1;
  -webkit-animation: blockan 1s 1; /* Safari 和 Chrome */
}
.tishi::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  filter: blur(20px);
  margin: -30px;
}
li:hover p {
  display: block;
}
.leave_style {
  mask: linear-gradient(rgba(0, 0, 0, 0.8) 0 0) left,
    /* 1 */ linear-gradient(rgba(0, 0, 0, 0.5) 0 0) right; /* 2 */
  mask-size: 50% 100%;
  mask-repeat: no-repeat;
}
@keyframes blockan {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 1);
    -ms-transform: translate3d(0, -100%, 1);
    transform: translate3d(0, -100%, 1);
  }
  100% {
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }
}

/*the animation definition*/
@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@keyframes pulse {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    -ms-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    -ms-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
    -ms-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
/* Demo styles */
.z-text {
  animation: wobble 10s ease-in-out infinite;
  transform: rotateX(30deg) rotateY(-30deg);
}

@keyframes wobble {
  0%,
  100% {
    transform: rotate3d(-1, 1, 0, 30deg);
  }
  25% {
    transform: rotate3d(1, 1, 0, 30deg);
  }
  50% {
    transform: rotate3d(1, -1, 0, 30deg);
  }
  75% {
    transform: rotate3d(-1, -1, 0, 30deg);
  }
}
/*base code*/
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}
.animated.hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}
/*the animation definition*/
@-webkit-keyframes flipInX {
  0% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
  }
  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }
  100% {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}
@keyframes flipInX {
  0% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -ms-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -ms-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
  }
  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    -ms-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    -ms-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }
  100% {
    -webkit-transform: perspective(400px);
    -ms-transform: perspective(400px);
    transform: perspective(400px);
  }
}
.flipInX {
  -webkit-backface-visibility: visible !important;
  -ms-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInX;
  animation-name: flipInX;
}
.swipper {
  border-radius: 20px;
  height: 520px;
  width: 1070px;
}
.swipper img {
  width: 100%;
  height: 100%;
}
.swiper_position {
  position: relative;
  width: 100%;
  height: 100%;
}
.swiper_position .swiper_title {
  position: absolute;
  margin-left: 46px;
  margin-top: 400px;
  color: #fff;
}
.swiper_position .swiper_title span {
  display: block;
  cursor: pointer;
}

.swiper_position .swiper_title span a {
  color: #fff;
}
.swiper_position .swiper_title span:nth-child(1) {
  font-size: 36px;
}
.swiper_position .swiper_title span:nth-child(2) {
  background-color: rgba(0, 0, 0, 0.7);
  text-align: center;
  height: 20px;
  line-height: 20px;
  padding: 6px 10px;
  border-radius: 6px;
  margin-top: 10px;
  width: 90px;
}

.swiper_position .swiper_title span:nth-child(2):hover {
  background-color: #fff;
  transition: width 2s;
  width: 90px;
}
.swiper_position .swiper_title span:nth-child(2):hover a {
  color: #f23051;
}
</style>
